<template>
  <div>
    <home-header></home-header>
    <home-swiper :list=swiperList></home-swiper>
    <home-icons></home-icons>
    <home-recommend></home-recommend>
    <home-weekend></home-weekend>
  </div>
</template>

<script>

import HomeHeader from './components/Header.vue'
import HomeSwiper from './components/Swiper.vue'
import HomeIcons from './components/Icons.vue'
import HomeRecommend from './components/Recommend.vue'
import HomeWeekend from './components/Weekend'
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import { mapState } from "vuex";

Vue.use(VueAxios, axios)

  export default {
    name:"home",
    data() {
      return {
        //city:'',
        swiperList:[],
        lastCity:''
      }
    },
    components:{
      HomeHeader,
      HomeSwiper,
      HomeIcons,
      HomeRecommend,
      HomeWeekend
    },
    computed: {
      ...mapState(['city'])
    },
    methods: {
      getHomeInfo(){
        //Vue.axios.get('/api/index.json')
        axios.get('/api/index.json?city=' + this.city)
          .then(this.getHomeInfoSucc)
      },
      getHomeInfoSucc(res){
        res=res.data
        if(res.ret&&res.data){
          const data=res.data
          this.city=data.city
          this.swiperList=data.swiperList
        }
        //console.log(res)
      }
    },
    mounted() {
      this.lastCity=this.city
      this.getHomeInfo()
    },
    activated() {
      if (this.lastCity!==this.city) {
        this.lastCity=this.city
        this.getHomeInfo()
        
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>